<template>
  <div class="mainContainer">

    <!--    <monitor :onlyTools="true"></monitor>-->
    <floatLeft v-show="showPane && !isRoam"></floatLeft>

    <!--    <float-center :show-tj="false" :lleft="20.83"></float-center>-->

    <floatRight v-show="showPane && !isRoam" @newsImp="newsImp" @partyImp="partyImp"></floatRight>
    <!--    新闻弹窗-->
    <el-dialog class="newsDialog" :visible.sync="showNews" :show-close="false" v-if="showNews" append-to-body>
      <newsDialog :newsData="newsData" @newsDialogImp="newsDialogImp"></newsDialog>
    </el-dialog>

    <!--    党组织架构弹窗-->
    <el-dialog class="partyDialog" :visible.sync="showParty" :show-close="false" v-if="showParty" append-to-body>
      <partyDialog :partyData="partyData" @partyDialogImp="partyDialogImp"></partyDialog>
    </el-dialog>

  </div>
</template>

<script>

import floatLeft from "@/views/home/floatLeft";
import floatRight from "@/views/home/floatRight";
import newsDialog from "@/views/home/newsDialog";
import partyDialog from "@/views/home/partyDialog";
import floatCenter from "@/components/floatCenter";
import {mapGetters} from "vuex";


export default {
  name: "index",
  components: {
    floatLeft, floatRight, floatCenter, newsDialog, partyDialog
  },
  data() {
    return {
      newsData: '',//选择的新闻数据
      showNews: false,//是否展示新闻
      partyData: '',//选择的党组织数据
      showParty: false,//是否展示党组织架构
    }
  },
  computed: {
    ...mapGetters({
      showPane: 'setting/getPane',
      isRoam: 'setting/getRoam',
    }),
  },
  mounted() {
    // window.addEventListener("load", () => {
    //   window.loads() //webrtc
    // })
    // window.addResponseEventListener("printMessage", data => {
    //   console.log("接收到像素流消息", data)
      // this.getUe4Data(data)
    // })
  },
  beforeDestroy() {
  },
  methods: {
    //新闻点击监听
    newsImp(value) {
      this.showNews = true
      this.newsData = value
    },
    //新闻弹窗监听
    newsDialogImp() {
      this.showNews = false
    },
    //组织架构点击监听
    partyImp(value) {
      this.showParty = true
      this.partyData = value
    },
    //组织架构弹窗监听
    partyDialogImp() {
      this.showParty = false
    }
  }
  ,
}
</script>

<style lang="scss">
.newsDialog {
  .el-dialog {
    width: 700px;
    height: 700px;
    background-color: transparent;
    border: 0px solid transparent;
  }

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0px;
  }
}

.partyDialog {
  .el-dialog {
    width: 662px;
    height: 400px;
    background-color: transparent;
    border: 0px solid transparent;
  }

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0px;
  }
}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .newsDialog {
    .el-dialog {
      height: calHeight_2k(500px);
    }

    .el-dialog__header {
    }

    .el-dialog__body {
    }
  }

  .partyDialog {
    .el-dialog {
      height: calHeight_2k(400px);
    }

    .el-dialog__header {
    }

    .el-dialog__body {
    }
  }
}
</style>
<style lang="scss" scoped>

.mainContainer {
  overflow-x: hidden;
  overflow-y: hidden;

  .titleContainer {
    width: 100%;
    height: 82px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_title.png");
  }
}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .mainContainer {

    .titleContainer {
      height: calHeight_2k(82px);
    }
  }
}

</style>
